<template>
  <a-modal :visible="visible" title="收银员打款明细" width="1400px" @ok="visible = false" @cancel="visible = false">
    <div class="page">
      <div class="search">
        <a-form-model ref="form" :form="form" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.pre.prevent="search">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商户号" prop="mchntNo">
                <a-input v-model="form.mchntNo" placeholder="请输入商户号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="收银员卡号" prop="acctNo">
                <a-input v-model="form.acctNo" placeholder="请输入收银员卡号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="打款日期" prop="cashbackDate">
                <a-date-picker v-model="form.cashbackDate" placeholder="请选择打款日期"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="打款状态" prop="cashbackStatus">
                <a-select v-model="form.cashbackStatus" placeholder="请选择打款状态">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="0">未打款</a-select-option>
                  <a-select-option value="1">打款成功</a-select-option>
                  <a-select-option value="2">打款失败</a-select-option>
                  <a-select-option value="3">打款中</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" style="text-align: center;">
              <a-space>
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <a-table :data-source="dataSource" :columns="columns" :pagination="pagination" :scroll="{x: 1600}" row-key="mcNo"></a-table>
    </div>
  </a-modal>
</template>

<script>
export default {
  name: 'PaymentDetail',
  data () {
    return {
      mcNo: "",
      visible: false,
      form: {
        mchntNo: "",
        acctNo: "",
        cashbackDate: "",
        cashbackStatus: "",
      },
      labelCol: {span:8},
      wrapperCol: {span: 16},
      dataSource: [],
      columns: [
        {title: "商户号", dataIndex: "mchntNo"},
        {title: "营销活动编号", dataIndex: "mcNo"},
        {title: "收银员编号", dataIndex: "userId"},
        {title: "收银员卡号", dataIndex: "acctNo"},
        {
          title: "打款状态",
          dataIndex: "cashbackStatus",
          customRender (text) {
            return ({
              "0": "未打款",
              "1": "打款成功",
              "2": "打款失败",
              "3": "打款中",
            }[text]) || ''
          }
        },
        {title: "打款类型", dataIndex: "cashbackMethod"},
        {title: "打款金额", dataIndex: "cashbackAmt"},
        {title: "打款时间", dataIndex: "cashbackTime"},
      ],

      pagination: {
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
    }
  },
  methods: {
    show(mcNo) {
      this.mcNo = mcNo
      this.$set(this.pagination, 'current', 1)
      this.reset()
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    search () {
      this.pagination = Object.assign({} ,{
        current: 1,
        pageSize: 10
      })
      this.fetch();
    },
    reset () {
      this.form = {
        mchntNo: "",
        acctNo: "",
        cashbackDate: "",
        cashbackStatus: "",
      };
      this.search();
    },
    async fetch () {
      let params = {
        mchntNo: this.form.mchntNo || null,
        acctNo: this.form.acctNo || null,
        cashbackDate: (this.form.cashbackDate && this.form.cashbackDate.format('YYYY-MM-DD')) || null,
        cashbackStatus: this.form.cashbackStatus || null,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize
      };
      const hideLoading = this.$message.loading("加载中...");
      try {
        const res = await this.$get('/admin/market/cashierManager/getPalyList', params)
        this.dataSource = res.data.records || [];
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        this.$message.error('网络错误，请稍后再试！')
        console.error(e)
      }
      hideLoading()
    },
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}
</style>
